<script>
export default {
  props: {
    value: {
      type: String
    }
  },
  data () {
    return {
      currentName: this.value
    }
  },
  provide () {
    return {
      rootTabs: this
    }
  },
  render () {
    const { handClickTab, currentName } = this
    const paneProps = this.$slots.default.map(item => item.componentOptions.propsData)
    const navList = paneProps.map(item => {
      const classObject = { active: currentName === item.name }
      return <a on-click={() => { handClickTab(item.name) }} href="javascript:;" class={classObject}>
        {item.label}
      </a>
    })
    const header = <div class="xtx-tab-nav">{navList}</div>
    const panels = <div class="xtx-tab-content">{this.$slots.default}</div>
    return <div class="xtx-tabs">
      {[header, panels]}
    </div>
  },
  methods: {
    handClickTab (name) {
      if (this.currentName === name) return
      this.currentName = name
      this.$emit('input', this.currentName)
    }
  }
}
</script>
<style lang="less" scoped>
.xtx-tabs {
  .xtx-tab-nav {
    height: 60px;
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 107px;
      height: 100%;
      border-right: 1px solid #f5f5f5;
      float: left;
      line-height: 59px;
      text-align: center;
      font-size: 16px;
      border-top: 2px solid transparent;
      cursor: pointer;
      user-select: none;
      &.active {
        color: @xtxColor;
        border-top-color: @xtxColor;
        background: #ffffff;
        height: 60px;
      }
    }
  }
}
</style>
